<script setup lang='ts' name="protocol-management-list">
import { ArrowUp } from '@element-plus/icons-vue'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    label?: string[]
    modelValue: boolean
}>(), {
    label: () => ['展开', '收起'],
})

const emits = defineEmits(['update:modelValue', 'change'])

const { label, modelValue } = toRefs(props)

function handle(item?: any) {
    const flag = !modelValue.value

    emits('update:modelValue', flag)
    emits('change', item)
}
</script>

<template>
    <span class="expand-btn"
          @click="handle"
    >
        {{ label[modelValue ? 0 : 1] }}
        <el-icon :class="{ 'top-sty': modelValue }">
            <ArrowUp />
        </el-icon>
    </span>
</template>

<style lang="less" scoped>
.expand-btn {
    cursor: pointer;

    .top-sty {
        transform: translateY(2px) rotateZ(180deg);
    }

    i {
        transform: translateY(1px);
        transition: all 0.5s;
    }
}
</style>
